import React from "react";
import { Form, Input, Modal, Button } from "antd";

// const { Option } = Select;
const { TextArea } = Input;

const formItemLayout1 = {
  labelCol: { span: 5 },
  wrapperCol: { span: 17 },
};
/*
const formItemLayout2 = {
  labelCol: { span: 5 },
  wrapperCol: { span: 10 },
};
*/

const trimValuesForKeys = (values, ...keys) => {
  keys.forEach(k => {
    if (values[k]) {
      values[k] = values[k].trim();
    }
  });
  return { ...values };
};

@Form.create()
class DealForm extends React.Component {

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, dispatch, processInstanceIds = []/* , title */, action, handleDealSubmit } = this.props;
    if (!processInstanceIds.length) return;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const type = "FlowMonitor/ProcessHandle";
      /*  此功能已废弃 
      if (title === "流程跳转") {
        type = "FlowMonitor/getTaskSkip"
      }
      */
      const newValues = trimValuesForKeys(values, "comment");
      const params = {
        ...newValues,
        processInstanceIds,
        action,
      };
      dispatch({ type, payload: params }).then((data) => {
        const { errCode } = data;
        if (errCode === 0) {
          this.handleCancel(true);
          if(handleDealSubmit){
            handleDealSubmit();
          }
          form.resetFields();
        }
      });
    });
  };

  handleCancel = (isQuery = false) => {
    const { handleCancel } = this.props;
    handleCancel(false, "", "", isQuery);
  };


  formItem = (title, getFieldDecorator) => {
    let item = [];
    if (title === "挂起处理" || title === "解挂处理") {
      const label = title.substr(0, 2);
      item = (
        <Form.Item
          label={`${label}原因`}
          {...formItemLayout1}
        >
          {getFieldDecorator("comment", {
            // initialValue: handleDetail.comment || '',
            rules: [
              { required: true, message: `请输入${label}原因` },
              { whitespace: true, message: `请输入${label}原因` },
              { max: 100, message: "请不要超过100个字符" },
            ],
          })(
            <TextArea placeholder={`请输入${label}原因`} rows={4} />,
          )}
        </Form.Item>
      );
      /* } else if (title === "流程跳转") {
        const { currentActivity, newActivity } = this.props;
        item = (
          <div>
            <Form.Item
              label="当前环节"
              {...formItemLayout1}
            >
              {getFieldDecorator('currentActivityname', {
                initialValue: currentActivity.name || '',
                // rules: [{ required: true, message: '请输入审批意见' }],
              })(
                <Input disabled />
              )}
            </Form.Item>
            <Form.Item
              label="当前环节"
              {...formItemLayout1}
              style={{ display: "none" }}
            >
              {getFieldDecorator('currentActivityId', {
                initialValue: currentActivity.id || '',
                // rules: [{ required: true, message: '请输入审批意见' }],
              })(
                <Input disabled />
              )}
            </Form.Item>
            <Form.Item
              label="跳转至环节"
              {...formItemLayout2}
            >
              {getFieldDecorator('newActivityId', {
                rules: [{ required: true, message: '请选择跳转环节' }],
              })(
                <Select
                  placeholder="请选择跳转环节"
                >
                  {newActivity.map((selectItem) => (
                    <Option value={selectItem.id} key={selectItem.id}>{selectItem.name}</Option>
                  ))}
                </Select>
              )}
            </Form.Item>
            <Form.Item
              label="审批意见"
              {...formItemLayout1}
            >
              {getFieldDecorator('comment', {
                rules: [
                  { required: true, message: '请输入审批意见' },
                  { whitespace: true, message: '请输入审批意见' },
                  { max: 100, message: '请不要超过100个字符' },
                ],
              })(
                <TextArea placeholder="请输入审批意见" rows={4} />
              )}
            </Form.Item>
          </div>
        ) */
    } else if (title === "撤单处理") {
      item = (
        <Form.Item
          label="撤单原因"
          {...formItemLayout1}
        >
          {getFieldDecorator("comment", {
            rules: [
              { required: true, message: "请输入撤单原因" },
              { whitespace: true, message: "请输入撤单原因" },
              { max: 100, message: "请不要超过100个字符" },
            ],
          })(
            <TextArea placeholder="请输入撤单原因" rows={4} />,
          )}
        </Form.Item>
      );
    } else if (title === "终止处理") {
      item = (
        <Form.Item
          label="终止原因"
          {...formItemLayout1}
        >
          {getFieldDecorator("comment", {
            rules: [
              { required: true, message: "请输入终止原因" },
              { whitespace: true, message: "请输入终止原因" },
              { max: 100, message: "请不要超过100个字符" },
            ],
          })(
            <TextArea placeholder="请输入终止原因" rows={4} />,
          )}
        </Form.Item>
      );
    } else if (title === "删除处理") {
      item = (
        <Form.Item
          label="删除原因"
          {...formItemLayout1}
        >
          {getFieldDecorator("comment", {
            rules: [
              { required: true, message: "请输入删除原因" },
              { whitespace: true, message: "请输入删除原因" },
              { max: 100, message: "请不要超过100个字符" },
            ],
          })(
            <TextArea placeholder="请输入删除原因" rows={4} />,
          )}
        </Form.Item>
      );
    }
    return (item);
  };

  renderFooter = (confirmLoading) => {
    return (
      <div>
        <Button style={{ marginRight: 10 }} onClick={() => this.handleCancel(false)}>取消</Button>
        <Button
          loading={confirmLoading}
          type="primary"
          onClick={() => {
            this.handleOk();
          }}
        >
          确定
        </Button>
        {/* {!isView && <Button loading={confirmLoading} type="primary" onClick={() => { this.handleOk() }}>确定</Button>} */}
      </div>
    );
  };

  render() {
    const { form, visible, title, confirmLoading } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Modal
        title={title || "处理详情"}
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => {
          this.handleCancel(false);
        }}
        footer={this.renderFooter(confirmLoading)}
        width='582px'
        centered
        confirmLoading={confirmLoading}
      >
        <Form>
          {this.formItem(title, getFieldDecorator)}
        </Form>
      </Modal>
    );
  }
}

export default DealForm;